<template>
	<view class="change-record">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="title-search">
				<div class="ipt-wrap">
					<view style="min-width: 120rpx">
						<uni-data-picker placeholder="区域" v-model="queryParams.district" class="data-picker"
							popup-title="请选择所在地区" :localdata="dataTree" @change="sessionChange">
						</uni-data-picker>
					</view>
					<view class="line"></view>
					<view style="min-width: 130rpx;">
						<uni-data-select placeholder="涉废类型" v-model="queryParams.wastetype" :localdata="adviceTypeList"
							:clear="true"></uni-data-select>
					</view>
				</div>
				<button @click="getList">查询</button>
			</view>
			<view class="detail-wrap">
				<view class="title-wrap">
					<view class="name">{{areaName}}</view>
					<view class="detail">
						<view class="enterprise">产废企业: <text>{{enterpriseNum}}</text> </view>
						<view class="num" v-if="recordType==1">设施数量: <text>{{deviceNum}}</text> </view>
					</view>
					<view class="line"></view>
				</view>
				<view class="list">
					<noData v-if="dataList.length==0" />
					<view class="item" v-for="item in dataList" :key="item.id" @click="jumpDetail">
						<view class="type">
							<view class="name">涉废类型</view>
							<view class="val">{{item.name}}</view>
						</view>
						<view class="replaced">
							<view class="name">{{recordType==1?'已更换量(kg）':'库存数量(kg）'}}</view>
							<view class="val">{{item.stockinNum || item.sumNum || 0}}</view>
						</view>
						<view class="no-replaced">
							<view class="name">{{recordType==1?'未更换量(kg）':"已处置量(kg）"}}</view>
							<view class="val">{{item.unStockinNum || item.disposeNum || 0}}</view>
						</view>
						<view class="sure-replace" v-if="recordType==1">
							<view class="name">{{recordType==1?'应更换量(kg）':'未处置量(kg）'}}</view>
							<view class="val">{{item.sumNum || 0}}</view>
						</view>
						<view class="sure-replace" v-if="recordType==2">
							<view class="name">{{recordType==1?'应更换量(kg）':'未处置量(kg）'}}</view>
							<view class="val">{{ item.unDisposeNum || 0}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index'
	import getAreaText from '../../request/getAreaText.js'
	import uploadFile from '../../request/uploadFile.js'

	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref
	} from 'vue'
	let queryParams = reactive({})
	let adviceTypeList = ref([])
	let dataTree = ref()
	let areaId = ref('')
	let dataList = ref([])
	let enterpriseNum = ref('')
	let areaName = ref('')
	let deviceNum = ref('')
	let recordType = ref(1)
	let name = ref("更换记录")
	onShow(() => {

	})

	onLoad((e) => {
		//	recordType.value 1 更换记录  2 处置记录
		recordType.value = e.type
		name.value = recordType.value == 1 ? '更换记录' : '处置记录'
		getList()
	})
	let getList = () => {
		areaId.value = queryParams.district
		if (recordType.value == 1) {
			http({
				url: '/stock/stockinSumInfo',
				data: {
					...queryParams
				}
			}).then((res) => {
				if (res.code == 0) {
					dataList.value = res.data.list
					deviceNum.value = res.data.num_device
					enterpriseNum.value = res.data.num_enterprise
				}
				console.log(res, 'res');
			})
			areaName.value = getAreaText(dataTree.value, queryParams.district)
		} else {
			http({
				url: '/wasteDispose/wasteDisposeSumInfo',
				data: {
					...queryParams
				}
			}).then((res) => {
				if (res.code == 0) {
					dataList.value = res.data.list
					enterpriseNum.value = res.data.num_enterprise
				}
			})
			areaName.value = getAreaText(dataTree.value, queryParams.district)

		}


	}
	let jumpDetail = () => {
		uni.navigateTo({
			url: `/contorllerPageOther/enterprisechangerecord/enterprisechangerecord?type=${recordType.value}&areaid=${areaId.value}`
		})
	}

	let sessionChange = (e) => {

		let id = e?.detail?.value[e.detail.value.length - 1]?.value

		queryParams.district = id
	}
	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)
			dataTree.value = data



		}

	})

	function mapTree(data) {
		console.log(data, 'data');
		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id
			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {
					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}
				}
			}
			return item

		})

	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 25rpx;
		color: #666666;


	}

	:deep(.text-color) {

		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.uni-select) {
		border: none !important;


		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.uni-select__input-placeholder) {
		font-weight: 400 !important;
		font-size: 25rpx !important;
		color: #333333 !important;
	}

	:deep(.selected-area) {

		font-weight: 400 !important;
		font-size: 25rpx !important;
		color: #333333 !important;

	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.arrow-area) {
		margin-bottom: 0rpx;
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	.change-record {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;

			.detail-wrap {
				height: calc(100vh - 160rpx - 140rpx);
				width: 702rpx;

				background: #FFFFFF;
				border-radius: 21rpx;
				margin: 0 auto;

				.title-wrap {
					padding: 27rpx 25rpx 30rpx 27rpx;
					position: relative;
					background: url("https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/chang-record-bgc.png") no-repeat;
					background-size: 100% 100%;



					.name {

						font-weight: bold;
						font-size: 34rpx;
						color: #000000;

					}

					.line {
						width: 100%;
						height: 1rpx;
						width: 648rpx;

						background: #CCCCCC;
					}

					.detail {
						margin: 27rpx 0;
						display: flex;
						align-items: center;

						.enterprise,
						.num {

							font-weight: 400;
							font-size: 24rpx;
							color: #666666;

							text {

								font-weight: 400;
								font-size: 24rpx;
								color: #666666;

							}
						}

						.num {
							margin-left: 152rpx;
						}


					}
				}

				.list {
					height: calc(100vh - 160rpx - 140rpx - 190rpx);
					overflow: scroll;
					display: flex;
					align-items: center;
					flex-direction: column;
					padding-bottom: 40rpx;

					.item:first-child {
						margin-top: 0rpx !important;
					}

					.item {
						display: flex;
						justify-content: space-between;
						width: 100%;
						padding-left: 27rpx;
						padding-right: 33rpx;
						margin-top: 35rpx;

						.type {
							display: flex;
							flex-direction: column;
							flex: 1;

							.name {
								font-weight: 400;
								font-size: 22rpx;
								color: #666666;
								text-align: center;
							}

							.val {
								text-align: center;
								font-weight: 500;
								font-size: 25rpx;
								color: #0874FA;
								margin-top: 10rpx;
							}


						}

						.replaced,
						.no-replaced,
						.sure-replace {
							display: flex;
							flex-direction: column;
							flex: 1;

							.name {
								text-align: center;
								font-weight: 400;
								font-size: 22rpx;
								color: #666666;

							}

							.val {
								text-align: center;
								font-weight: 400;
								font-size: 29rpx;
								color: #333333;
								margin-top: 10rpx;

							}
						}
					}



				}
			}


			.title-search {
				padding: 30rpx 20rpx 20rpx 22rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				button {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					line-height: 67rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;

				}

				.ipt-wrap {
					width: 581rpx;
					height: 67rpx;
					background: #FFFFFF;
					border-radius: 34rpx;
					flex-shrink: 0;
					display: flex;
					align-items: center;

					padding-left: 30rpx;

					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin: 0 20rpx;
					}

					image {
						width: 28rpx;
						height: 28rpx;
					}

					input {
						padding-left: 17rpx;

						height: 100%;
						flex-shrink: 0;
						font-weight: 400;
						font-size: 25rpx;
						color: #666666;
						flex-grow: 1;
						padding-right: 50rpx;
					}


				}


			}
		}
	}
</style>